<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 200px;
				top: 300px;
				width: 10px;
				height: 10px;
				background: black;
			}
			
			.box{
				position: absolute;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var testNode = document.querySelector("#test");
			var startX = testNode.offsetLeft;
			var startY = testNode.offsetTop;
			//角度
			var deg =0;
			var step = 100;
			
			
			setInterval(function(){
				deg++;
				
				testNode.style.left = startX + (deg*Math.PI/180)*step/2 +'px';
				testNode.style.top = startY + Math.sin( deg*Math.PI/180 )*step*2+"px";
				
				var boxNode = document.createElement("div");
				boxNode.classList.add("box");
				boxNode.style.left=testNode.offsetLeft+"px";
				boxNode.style.top=testNode.offsetTop+"px";
				document.body.appendChild(boxNode);
				
			},1000/60)
		}
		
		
	</script>
</html>
